<template>
  <!-- 角色管理页面 -->
  <div class="role">
    <div class="input">
      <!-- 搜索框 -->
      <input
        type="text"
        v-model="keyword"
        placeholder="请输入角色名称"
        @keyup.enter="role_search"
      />
      <!-- 搜索按钮 -->
      <button class="search" @click="role_search">搜 索</button>
      <!-- 新增角色 -->
      <a href="JavaScript:;" title="新增角色" class="add" @click="add">+</a>
      <!-- 查看所有角色 -->
      <a
        href="JavaScript:;"
        title="查看所有角色"
        class="list-all"
        @click="query_allrole"
      ></a>
    </div>
    <!-- 还没开始搜索时的空状态 -->
    <el-empty description="还没开始搜素哦~" v-if="show"></el-empty>
    <!-- 没有搜索结果时显示的空状态 -->
    <el-empty description="没有该角色的信息哦~" v-if="showNot"></el-empty>
    <!-- 角色展示 -->
    <div class="editor">
      <div class="query-role" v-if="display">
        <!-- 列出已有角色 -->
        <ul>
          <p class="role_list">角色列表</p>
          <li
            v-for="(item, index) in roleList"
            :key="index"
            @click="editor(item)"
          >
            <span v-show="item.rolename">{{ item.roleName }}</span>
            <input
              v-show="item.input"
              @click.stop="a"
              type="text"
              v-model="item.roleName"
            />
            <button @click.stop="modifyRole(item)">{{ item.modify }}</button>
          </li>
        </ul>
      </div>
      <div class="editor-role" v-if="permissions">
        <!-- 编辑角色名 -->
        <div class="editor-name">
          <p>
            <span>角色名：</span>
            <span v-if="modifyButton">{{ roleName }}</span>
            <input
              v-if="addButton"
              v-model="roleName"
              type="text"
              placeholder="请输入角色名称"
            />
          </p>
        </div>
        <!-- 编辑角色权限 -->
        <div class="permissions-role">
          <el-transfer
            style="text-align: left; display: inline-block"
            v-model="value"
            filterable
            :render-content="renderFunc"
            :titles="['权限池', '角色权限']"
            :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}',
            }"
            @change="handleChange"
            :data="data"
          >
          </el-transfer>
        </div>
        <!-- 提交按钮 -->
        <div class="button">
          <button v-if="modifyButton" @click="delete_role">删除角色</button>
          <button v-if="modifyButton" @click="ConfirmChangePermissions">
            确认修改
          </button>
          <button v-if="addButton" @click="add_role">确认添加</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RoleManagement",
  data() {
    return {
      show: true, //还没开始搜索时的空状态
      showNot: false, //没有搜索结果时显示的空状态
      display: false, //角色列表搜索结果显示与隐藏
      keyword: "", //搜索框的关键字
      roleName: "", //角色名
      roleList: [], //角色列表
      nameHistory: "", //修改前的角色名字
      modifyButton: false, //修改删除按钮显示与隐藏
      addButton: false, //添加角色按钮显示与隐藏
      permissions: false, //修改权限显示与隐藏(穿梭框)
      data: [], //权限池
      value: [], //已拥有权限 编号+值
      values: [], //已拥有权  限的名字,取出来的值，传给后端
      listId: [], //已拥有权限的id,取出来的值，传给后端
      roleId: 0, //存角色id

      // 穿梭狂里面显示内容的格式 (格式：1-权限名)
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        );
      },
    };
  },
  methods: {
    // 穿梭框左右两边的值一旦发生变化调用此方法
    handleChange(value) {
      // value  改变后右边框里剩的值的key值
      this.values = []; // 当前选中权限列表清空
      this.listId = []; // 当前选中权限的id列表清空

      // 通过循环将已选中的权限名和id分别取出来
      // 遍历已选中权限
      for (let i = 0; i < value.length; i++) {
        // 遍历权限池
        for (let j = 0; j < this.data.length; j++) {
          // 通过判段已拥有权限和权限池的key值取出权限名和权限id
          if (value[i] === this.data[j].key) {
            this.values.push(this.data[j].label);
            this.listId.push(this.data[j].id);
            break;
          }
        }
      }
    },
    // 角色管理-查看所有角色列表
    query_allrole() {
      // 清空搜索关键词
      this.keyword = "";
      this.$http({
        method: "post",
        url: `jurisdiction/queryAllRoles`,
        params: {
          keywords: "", //角色名
        },
      }).then(({ data }) => {
        this.roleList = []; // 清空角色列表
        if (data.flag) {
          // 隐藏空状态和穿梭框，显示角色列表
          this.show = false;
          this.display = true;
          this.showNot = false;
          this.permissions = false;
          this.roleList = data.data; // 更新角色列表
          for (let i = 0; i < this.roleList.length; i++) {
            this.$set(this.roleList[i], "modify", "修改");
            this.$set(this.roleList[i], "rolename", true);
            this.$set(this.roleList[i], "input", false);
          }
        } else {
          // 如果角色为空，显示空状态，隐藏角色列表和穿梭框
          this.$message.error(data.errorMsg);
          this.show = true;
          this.display = false;
          this.showNot = false;
          this.permissions = false;
        }
      });
    },
    // 角色管理-搜索角色
    role_search() {
      // 清空关键词两边的空格后判断是否有为空
      if (this.keyword.trim()) {
        this.roleName = ""; //清除角色名
        this.value = []; //清空已拥有权限
        this.search_role(); // 关键字搜索角色
      } else {
        // 关键词为空显示空状态，隐藏角色列表和穿梭框
        this.$message.error("搜索关键词不能为空");
        this.show = true;
        this.display = false;
        this.showNot = false;
        this.permissions = false;
      }
    },
    // 关键字搜索角色方法
    search_role() {
      this.$http({
        method: "post",
        url: `jurisdiction/queryAllRoles`,
        params: {
          keywords: this.keyword, //角色名
        },
      }).then(({ data }) => {
        this.roleList = []; // 清空角色列表
        if (data.flag) {
          // 显示角色列表，隐藏其他的空状态或者添加按钮
          this.roleList = data.data;
          this.show = false;
          this.display = true;
          this.showNot = false;
          this.addButton = false;
          this.modifyButton = true;
          for (let i = 0; i < this.roleList.length; i++) {
            this.$set(this.roleList[i], "modify", "修改");
            this.$set(this.roleList[i], "rolename", true);
            this.$set(this.roleList[i], "input", false);
          }
        } else {
          this.$message.error(data.errorMsg);
          // 关键词不存在显示没搜到的空状态，隐藏角色列表
          this.show = false;
          this.display = false;
          this.showNot = true;
          this.permissions = false;
        }
      });
    },
    // 角色管理-查询权限池
    queryAllPermissions(value, id) {
      this.$http({
        method: "post",
        url: "jurisdiction/queryAllPermissions",
      }).then(({ data }) => {
        console.log("权限池", data);
        this.data = []; //清空权限池
        if (data.flag) {
          // 获取权限池，追加到穿梭框
          for (let i = 0; i < data.data.length; i++) {
            this.data.push({
              key: i + 1,
              label: data.data[i].permission_name,
              id: data.data[i].pid,
            });
          }
          // 当value为1时调用查询角色已拥有的权限
          if (value) {
            this.have_permissions(id); // 查询已拥有的权限
          }
        } else {
          this.$message.info(data.errorMsg); //没有权限时提示
        }
      });
    },
    // 查询已拥有的权限
    have_permissions(id) {
      this.$http({
        method: "post",
        url: `jurisdiction/displaysThePermissionsOfRole`,
        params: {
          rid: id, //角色名
        },
      }).then(({ data }) => {
        console.log("已拥有角色", data);
        this.value = []; //清空已拥有权限
        this.listId = []; //清空已拥有权限的id
        if (data.flag) {
          // 权限池和已拥有权限作比较，已拥有则赋key值到已拥有权限列表
          for (let i = 0; i < this.data.length; i++) {
            //权限池
            for (let j = 0; j < data.data.length; j++) {
              //已拥有权限
              if (this.data[i].label === data.data[j].permission_name) {
                this.value.push(this.data[i].key);
                this.listId.push(data.data[j].pid);
                break;
              }
            }
          }
        }
      });
    },
    // 角色管理-角色修改
    editor(value) {
      // 传入当前选择角色的名字，显示权限编辑
      this.permissions = true;
      this.modifyButton = true;
      this.addButton = false;
      this.roleName = value.roleName; //更新权限编辑区的角色名
      this.roleId = value.rid; //更新角色id
      this.queryAllPermissions(1, value.rid); //调用查询权限池和已拥有权限
    },
    // 角色管理-新增角色
    add() {
      this.value = []; //清空已拥有权限
      this.keyword = ""; //清空搜索关键词
      this.roleName = ""; //清空编辑区角色名
      // 隐藏空状态，显示添加角色编辑区
      this.show = false;
      this.addButton = true;
      this.modifyButton = false;
      this.display = false;
      this.permissions = true;
      this.showNot = false;
      this.queryAllPermissions(0); //调用查询权限池
    },
    // 确认添加角色
    add_role() {
      // 角色名不能为空
      if (this.roleName) {
        // 角色名不能超过八个字符
        if (this.roleName.length <= 8) {
          // 角色权限不能为空
          if (this.values.length > 0) {
            this.$http({
              method: "post",
              url: `role/addNewRole?pid=${this.listId}`, //新增角色所分配的权限id
              params: {
                rolename: this.roleName, //角色名
              },
            }).then(({ data }) => {
              console.log("添加角色", data);
              if (data.flag) {
                this.$message.success(data.data); //新增角色成功
                this.roleName = ""; //清空角色名
                this.value = []; //清空已拥有权限
              } else {
                this.$message.error(data.data); //新增失败
              }
            });
          } else {
            this.$message.error("权限不能为空");
          }
        } else {
          this.$message.error("角色名不能超过8个字符");
        }
      } else {
        this.$message.error("角色名不能为空");
      }
    },
    // 修改角色名
    modifyRole(value) {
      if (value.modify === "修改") {
        value.modify = "确认";
        value.rolename = false;
        value.input = true;
        this.nameHistory = value.roleName;
      } else {
        this.$confirm("是否修改角色名称", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            if (this.nameHistory === value.roleName) {
              this.$message.error("角色名未作任何更改");
            } else if (value.roleName.trim()) {
              if (value.roleName.trim().length < 9) {
                this.$http({
                  method: "post",
                  url: `jurisdiction/changeTheRoleName`,
                  params: {
                    rid: value.rid, //角色id
                    currentRoleName: value.roleName, //修改后角色名
                  },
                }).then(({ data }) => {
                  console.log("修改角色名字", data);
                  if (data.flag) {
                    value.modify = "修改";
                    value.rolename = true;
                    value.input = false;
                    this.search_role(); //更新角色列表
                    this.$message.success(data.errorMsg);
                  } else {
                    this.$message.error(data.errorMsg);
                  }
                });
              } else {
                this.$message.error("角色名不能超过八个字符");
              }
            } else {
              this.$message.error("角色名不能为空");
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消修改角色名",
            });
            value.modify = "修改";
            value.rolename = true;
            value.input = false;
          });
      }
    },
    // 确认修改角色权限
    ConfirmChangePermissions() {
      // 已拥有的权限不能为空
      if (this.listId.length) {
        this.$http({
          method: "post",
          url: `jurisdiction/changeRolePermissions?pid=${this.listId}`, //权限的pid集合
          params: {
            rid: this.roleId, //角色id
          },
        }).then(({ data }) => {
          console.log("修改角色权限", data);
          if (data.flag) {
            this.queryAllPermissions(1, this.roleId); //更新角色权限
            this.$message.success(data.errorMsg); //修改角色权限成功
          } else {
            this.$message.error(data.errorMsg); //修改角色权限失败
          }
        });
      } else {
        this.$message.error("角色权限不能为空");
      }
    },
    a() {},
    // 删除角色
    delete_role() {
      this.$http({
        method: "post",
        url: `jurisdiction/deleteTheRole`,
        params: {
          rid: this.roleId, //角色名
        },
      }).then(({ data }) => {
        if (data.flag) {
          this.value = []; //穿梭框右边为空
          this.search_role(); //更新角色列表
          this.queryAllPermissions(0); //刷新权限池（也可不写，选中权限为空时，之前拿的权限池的权限自动回更）
          this.roleName = ""; //编辑区角色名清空
          this.$message.success(data.errorMsg); //删除角色成功
        }
      });
    },
  },
};
</script>

<style scoped>
/*角色管理 */
.role {
  position: relative;
}
.role .input {
  height: 44px;
}
/* 搜索栏 */
.role .input input {
  height: 40px;
  width: 350px;
  outline: none;
  border: 2px solid #f28731;
  border-radius: 20px;
  padding: 0 40px 0 20px;
  font-size: 18px;
  position: absolute;
  left: 50%;
  transform: translate(-80%);
}
/* 搜索按钮 */
.role .search {
  outline: none;
  height: 44px;
  width: 110px;
  border: 0;
  background-color: #f28731;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  position: absolute;
  left: 50%;
  transform: translate(60%);
  font-size: 20px;
  cursor: pointer;
  color: #fff;
}
.role .search::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e858";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 8px;
  font-size: 20px;
}
/* 角色管理页面内容 */
.add,
.list-all {
  text-align: center;
  width: 43px;
  height: 43px;
  line-height: 43px;
  border-radius: 50%;
  border: 0;
  background-color: #f28731;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.add {
  position: absolute;
  left: 50%;
  transform: translate(450%);
  top: 0px;
  line-height: 37px;
  font-size: 35px;
}
.list-all {
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(580%);
  top: 0px;
}
.list-all::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e62c";
  /* 必须加 */
  font-family: "iconfont";
  font-size: 30px;
}
.editor {
  display: flex;
  padding: 40px 0;
  width: 98%;
}
/* 查询角色结果 */
.query-role .role_list {
  margin-bottom: 10px;
  font-weight: 700;
}
.query-role {
  flex: 3;
  height: 500px;
  padding: 0 20px;
  box-sizing: border-box;
}
.query-role ul {
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgb(230, 229, 229);
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  overflow: auto;
  padding: 20px 20px;
}
.query-role li {
  cursor: pointer;
  padding: 10px 20px;
  font-size: 18px;
  overflow: hidden;
}
.query-role li:hover {
  background-color: rgb(218, 217, 217);
}
.query-role li span {
  float: left;
}
.query-role li input {
  padding: 0 10px;
  float: left;
  height: 25px;
  font-size: 16px;
  width: 150px;
  outline: none;
  border: 1px solid #f28731;
  border-radius: 5px;
}
.query-role li button {
  float: right;
  width: 50px;
  height: 25px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #f28731;
  background-color: #fbe5d3;
  border-radius: 5px;
  color: #b75c11;
}
.query-role li button:hover {
  font-weight: 700;
}
/* 编辑角色 添加 修改 删除 */
.editor-role {
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgb(230, 229, 229);
  flex: 8;
  height: 500px;
  padding: 20px;
  box-sizing: border-box;
}
/* 角色名 */
.editor-name {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}
.editor-name input {
  height: 40px;
  width: 160px;
  border: 1px solid #f28731;
  outline: none;
  font-size: 20px;
  padding: 0 18px;
  border-radius: 5px;
}
/* 穿梭框 */
.permissions-role {
  margin-top: 15px;
  text-align: center;
}
.permissions-role /deep/.el-transfer-panel {
  width: 300px;
  height: 350px;
}
.permissions-role /deep/.el-button--primary.is-disabled {
  background-color: #faae6f;
  border: 0;
}
.permissions-role /deep/.el-button--primary {
  background-color: #f28731;
  border: 0;
}
.permissions-role /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #f28731;
}
.permissions-role /deep/.el-transfer-panel .el-transfer-panel__header {
  height: 50px;
}
.permissions-role
  /deep/.el-transfer-panel
  .el-transfer-panel__header
  .el-checkbox {
  line-height: 50px;
}
.permissions-role
  /deep/.el-transfer-panel
  .el-transfer-panel__header
  .el-checkbox
  .el-checkbox__label {
  font-size: 20px;
}
.permissions-role
  /deep/.el-transfer-panel
  .el-transfer-panel__header
  .el-checkbox
  .el-checkbox__label
  span {
  font-size: 18px;
}
.permissions-role /deep/.el-transfer-panel .el-checkbox__inner {
  width: 18px;
  height: 18px;
}
.permissions-role /deep/.el-transfer-panel .el-checkbox__inner::after {
  height: 11px;
  width: 6px;
  left: 5px;
}
.permissions-role /deep/ .el-checkbox__label {
  font-size: 18px;
}
.permissions-role /deep/ .el-transfer-panel__filter .el-input__inner {
  height: 40px;
  font-size: 16px;
  padding-left: 40px;
}
.permissions-role /deep/ .el-transfer-panel__filter .el-input__icon {
  font-size: 18px;
  padding-top: 2px;
}
.permissions-role /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #f28731;
  border-color: #f28731;
  font-size: 20px;
}
.permissions-role /deep/.el-checkbox:hover {
  color: #f28731;
}
.permissions-role /deep/.el-checkbox__inner:hover {
  border-color: #f28731;
}
.permissions-role
  /deep/.el-checkbox__input.is-indeterminate
  .el-checkbox__inner {
  border-color: #f28731;
  background-color: #f28731;
}
.permissions-role /deep/.el-input__inner:focus {
  border-color: #f28731;
}
/* 按钮 */
.button {
  text-align: center;
}
.button button {
  width: 100px;
  height: 30px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-right: 10px;
  margin-top: 22px;
}
</style>